<template>
  <div class="map">
    <div class="order">
      <div class="box1"></div>
    </div>
  </div>
  
</template>

<script>
  import * as echarts from 'echarts';
  import axios from 'axios';
  export default {
    methods: {
      async showBox1(){
        // 初始化一个echarts对象
        var myChart=echarts.init(document.querySelector('.box1'));
        myChart.showLoading();
        let {data}=await axios.get('json/China.json')
        console.log(data);
        myChart.hideLoading();
        echarts.registerMap('china', data);
        let option={
           
           textStyle:{
            fontSize:9
           },
           emphasis: {
              areaColor:'#fff',

              label: {
                show: true,
                // 高亮时标签的文字。
                // formatter: 'This is a emphasis label.'
              }
            },
            // visualMap: {
            //   min: 800,
            //   max: 1000,
            //   text: ['High', 'Low'],
            //   realtime: false,
            //   calculable: true,
            //   inRange: {
            //     color: ['#87C524','#99D932']
            //   }
            // },
           series: [
            {
              name: '中国地图',
              type: 'map',
              map: 'china',
              label: {
                show: true
              },
              itemStyle: {
                normal: {
                  label: {
                    show: true
                  },
                  color: '#ffffff',
                  // borderWidth: 4,
                  areaColor: 'rgba(110,167,19)',
                  borderColor: 'rgba(255, 255, 255, 1)', //线
                  
                },
                emphasis: {
                  label: {
                    show: true,
                    color: '#fff',
                  },
                  areaColor: 'rgba(153, 217, 50)',
                },
              },
              data: [],
            }]
        }
           
        myChart.setOption(option)
      }
    },
    mounted(){
      this.showBox1()
    }
  }
</script>

<style lang="scss" scoped>
.order .box1{
  width: 100%;
  height: 600px;
  // border: 1px solid red;
  // color: red;
}
</style>